<template>
    <el-card shadow="always" >
        <div class="addMain">
            <el-form :model="companyAdd" :rules="rules" label-suffix=":" label-position="left" ref="ruleForm" label-width="110px" :show-message="true" class="demo-ruleForm">
                <el-form-item label="企业名称" prop="cName" size="small">
                    <el-input type="text" v-model.trim="companyAdd.cName" :clearable="companyAdd.cName?true:false">
                    </el-input>
                </el-form-item>
                <el-form-item label="营业执照编码" prop="license" size="small">
                    <el-input type="text" v-model.trim="companyAdd.license" :clearable="companyAdd.license?true:false"></el-input>
                </el-form-item>
                <el-form-item label="营业执照照片" prop="licenseImg" size="small">
                    <el-row class="imgMain">
                        <el-col :span="4"><span class="imgBtn">上传</span></el-col>
                        <el-col :span="4"><span class="imgBtn">删除</span></el-col>
                        <el-col :span="4"><span class="imgBtn">拍照</span></el-col>
                    </el-row>
                    <!-- <el-input type="text" v-model.trim="companyAdd.licenseImg" :clearable="companyAdd.licenseImg?true:false"></el-input> -->
                    <div class="imgBox">
                        {{companyAdd.licenseImg}}
                    </div>
                </el-form-item>
                <el-form-item label="单位电话" prop="businessPhone" size="small">
                    <el-input type="text" v-model.trim="companyAdd.businessPhone" :clearable="companyAdd.businessPhone?true:false"></el-input>
                </el-form-item>
                <el-form-item label="单位地址" prop="presentAddress" size="small">
                    <el-input type="text" v-model.trim="companyAdd.presentAddress" :clearable="companyAdd.presentAddress?true:false"></el-input>
                </el-form-item>

                <el-form-item label="法人姓名" prop="legalName" size="small">
                    <el-input type="text" v-model.trim="companyAdd.legalName" :clearable="companyAdd.legalName?true:false">
                        <template slot="append">
                            <!-- <el-button slot="append" size="small">读证</el-button> -->
                            <span>读证</span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="证件号码" prop="legalIdCard" size="small">
                    <el-input type="text" v-model.trim="companyAdd.legalIdCard" :clearable="companyAdd.legalIdCard?true:false"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="legalPhone" size="small">
                    <el-input type="text" v-model.trim="companyAdd.legalPhone" :clearable="companyAdd.legalPhone?true:false"></el-input>
                </el-form-item>
                <el-form-item label="法人照片" prop="legalImg" size="small">
                    <el-row class="imgMain">
                        <el-col :span="4"><span class="imgBtn">上传</span></el-col>
                        <el-col :span="4"><span class="imgBtn">删除</span></el-col>
                        <el-col :span="4"><span class="imgBtn">拍照</span></el-col>
                    </el-row>
                    <div class="imgBox">
                        {{companyAdd.legalImg}}
                    </div>
                </el-form-item>
                
                <el-form-item label="经办人姓名" prop="agentName" size="small">
                    <el-input type="text" v-model.trim="companyAdd.legalName" :clearable="companyAdd.legalName?true:false">
                        <template slot="append">
                            <!-- <el-button slot="append" size="small">读证</el-button> -->
                            <span>读证</span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="证件号码" prop="agentIdCard" size="small">
                    <el-input type="text" v-model.trim="companyAdd.agentIdCard" :clearable="companyAdd.agentIdCard?true:false"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="agentPhone" size="small">
                    <el-input type="text" v-model.trim="companyAdd.agentPhone" :clearable="companyAdd.agentPhone?true:false"></el-input>
                </el-form-item>
                <el-form-item label="经办人照片" prop="agentImg" size="small">
                    <el-row class="imgMain">
                        <el-col :span="4"><span class="imgBtn">上传</span></el-col>
                        <el-col :span="4"><span class="imgBtn">删除</span></el-col>
                        <el-col :span="4"><span class="imgBtn">拍照</span></el-col>
                    </el-row>
                    <div class="imgBox">
                        {{companyAdd.agentImg}}
                    </div>
                </el-form-item>

                <el-form-item label="客户类型" prop="clientType" size="small">
                    <el-select size="small" v-model.trim="companyAdd.clientType" filterable placeholder="请选择"  :clearable="companyAdd.clientType?true:false">
                    <el-option
                    v-for="item in companyAdd.selectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="业务员" prop="salesman" size="small">
                    <el-select size="small" v-model.trim="companyAdd.salesman" filterable placeholder="请选择" auto-complete="off" :clearable="companyAdd.salesman?true:false">
                        <el-option
                        v-for="item in companyAdd.selectOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>
<script>
export default {
  name: "companyAdd",
  data() {
    return {
      companyAdd: {
        cName: null,
        license: null,
        licenseImg: null,
        businessPhone: null,
        presentAddress: null,
        legalName: null,
        legalIdCard: null,
        legalPhone: null,
        legalImg: null,
        agentName: null,
        agentIdCard: null,
        agentPhone: null,
        agentImg: null,
        clientType: null,
        salesman: null,
        selectOptions: [
          {
            value: "1",
            label: "售车客户"
          },
          {
            value: "2",
            label: "购车客户"
          },
          {
            value: "3",
            label: "售车客户"
          },
          {
            value: "4",
            label: "购车客户"
          },
          {
            value: "5",
            label: "售车客户"
          },
          {
            value: "6",
            label: "购车客户"
          }
        ],
        clientType: "",
        salesman: "" //显示的是label值  使用的是value值
      },
      rules: {
        cName: [{ required: true, message: "不能为空", trigger: "blur" }],
        license: [{ required: true, message: "不能为空", trigger: "blur" }],
        licenseImg: [{ required: true, message: "不能为空", trigger: "blur" }],
        businessPhone: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        legalName: [{ required: true, message: "不能为空", trigger: "change" }],
        legalIdCard: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        legalPhone: [{ required: true, message: "不能为空", trigger: "blur" }],
        legalImg: [{ required: true, message: "不能为空", trigger: "blur" }],
        agentName: [{ required: true, message: "不能为空", trigger: "blur" }],
        agentIdCard: [{ required: true, message: "不能为空", trigger: "blur" }],
        agentPhone: [{ required: true, message: "不能为空", trigger: "blur" }],
        agentImg: [{ required: true, message: "不能为空", trigger: "change" }],
        clientType: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        salesman: [{ required: true, message: "不能为空", trigger: "change" }]
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.el-card {
  width: 100%;
  .addMain {
    width: 50%;
    margin: 0 auto;
    .el-form {
      .el-form-item--small.el-form-item {
        margin-bottom: 30px;
      }
      label{
          font-size: 1.17rem;
      }
    }
    .imgMain {
      text-align: center;
      .imgBtn {
        color: #3399ff;
        cursor: pointer;
      }
    }
    .imgBox {
      width: 150px;
      height: 150px;
      background-color: red;
      margin-left: 48px;
    }
  }
}
</style>

